<template>
<div>
    <div class="item" @click="showEditInput" v-show="!isEdit">
        {{text}}
    </div>
    <input ref="inputRef" class="item edit" v-model="editMsg" v-show="isEdit">
</div>

</template>

<script>
export default {
     props:{
         text:{
            type:String,
            default:""
         },
         index:{
             type:Number
         }
     },
    components:{dddcopy},
    data(){
     return{
        editMsg:this.text,
        isEdit:false
     }
   },
    methods: {
         showEditInput() {
            this.isEdit=true;
            this.$nextTick(()=>{
                this.$refs.inputRef.focus();
            })
            },  
            textChange(){
                this.isEdit=false;
                this.$emit('change',this.editMsg,
                this.index)
            }    
        }
}
</script>
<style scoped>
.item{
    width: 200px;
    height: 40px;
    line-height:40px;
    background:#40b883 ;
    color:white;
    border-bottom:1px solid #ccc;
    margin:0 auto;
}
.edit{
    background:white;
    color:black;

}
</style>
